<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex基础2</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.container{
				/*声明使用flex布局*/
				height: 200px;
				display: flex;		
				flex-direction: row;	
				/*排列方向
				 * [
				 * row: 横向;
				 * columns: 纵向;
				 * row-reverse横向翻转,
				 * column-reverse纵向翻转]*/
				justify-content: space-around;
				/*主轴方向(横向排列时,水平方向就是主轴;纵向排列,垂直方向就是主轴):
					space-between   相当于word文档的分散对齐(两端对齐,中间平均分布)
					space-around: 	左右边上有间距,中间item的间距是左右边上的两倍;
				*/
				align-items: stretch;	
				/*交叉轴方向: 
					center      居中;
					flex-start 	起点;
					flex-end 	终点;
					baseline    以第一个文字为基线对齐
					stretch: 	伸展(item没有固定高度时,撑满容器);
				*/
			}
			.item{
				width: 10%;			/*每个item占20%*/
				text-align: center;
				background: #129FEA;
				margin-right: 10px;
				/*height: 50px;*/
				/*line-height: 50px;*/
			}
			.container div:nth-of-type(3){
				/*height: 100px;*/
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">item1</div>
			<div class="item">item2</div>
			<div class="item">item3</div>
			<div class="item">item4</div>
			<div class="item">item5</div>
		</div>
	</body>
</html>
